<template>
    <div ref="container" id='container' class="app v-touch">
        <transition>
            <keep-alive>
                <router-view ref="page" v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
        </transition>
        <transition>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
        </transition>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        // components: { pFloatComments },

        data () {
            return {
//                loadingShow: 1,      // index.html的菊花loading
                trans: 'fade'
            };
        },

        watch: {
        },

        created () {
        },

        mounted () {
        },
        methods: {
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss">
    @import './scss/app.scss';
    [v-cloak]{
        display: none;
    }

    // vue-lazyload 延时加载样式
    img[lazy=loading] {
        width: pxTorem(20px);
        height: pxTorem(20px);
        margin: pxTorem(100px) 0;
    }
    img[lazy=loaded] {
        width: 100%;
        height: 100%;
        margin: 0 0 pxTorem(3px) 0;
    }
    img[lazy=error] {
        width: pxTorem(34px);
        height: pxTorem(28px);
        margin: pxTorem(100px) 0;
    }

    .page {

        h2 {
            padding-top: pxTorem(15px);
            padding-left: pxTorem(15px);
            line-height: pxTorem(40px);
        }

        .desc {
            /*height: pxTorem(28px);*/
            font-size: pxTorem(14px);
            line-height: 1.5;
            padding: 0 pxTorem(15px);
            color: #777E8C;
            /*background: #f2f2f4;*/

            /*display: table; // v-scroller会造成盒模型崩塌?*/
            table-layout: fixed; // 不加上这个如果内部标签有一大串url, 此父级会被撑开
            text-align: justify; // 两边对齐...
            word-break: break-all; // 强制换行, 避免超长url
            white-space: pre-wrap;
        }

        ul.desc {
            width: 100%;

            li {
                padding: pxTorem(5px);
                background: rgba(86,61,124,0.15);
                border: 1px solid rgba(86,61,124,0.2);
            }
        }

        .attributes {
            /*padding: 0 pxTorem(6px);*/
        }
    }

    /* 滑入滑出动画。 Author by Dio Zhu. on 2017.3.28 */
    .slide-left-enter-active, .slide-right-enter-active {
        transition: all .3s ease;
    }
    .slide-left-leave-active, .slide-right-leave-active {
        /*transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);*/
        transition: all .1s ease;
    }
    .slide-left-enter, .slide-left-leave-active {
        transform: translateX(20px);
        opacity: 0.1;
    }
    .slide-right-enter, .slide-right-leave-active {
        transform: translateX(-20px);
        opacity: 0.1;
    }
</style>
